<template>
  <el-main class="main">
    <!-- 标题 筛选 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6"><h3 class="table-title">用户页面</h3></el-col>
      <el-col :span="12" align="right" class="table-title-right">
        <el-input v-model="itemFilter" size="mini" class="iteminput" />
      </el-col>
    </el-row>
    <!-- 菜单点击 -->
    <el-row :gutter="20" type="flex" class="el-row-bg">
      <el-col v-for="(item, index) in categoryData" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" @click.native="click(item, $event)">{{ item.name }}</el-card>
      </el-col>
    </el-row>
    <!-- 标题 筛选 添加 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6"><h3 class="table-title">管理列表页面</h3></el-col>
      <el-col :span="12" align="right" class="table-title-right">
        <el-input v-model="tableFilter" size="mini" placeholder="请输入关键字" class="iteminput" />
        <el-button plain type="primary" size="mini" icon="el-icon-plus" @click.stop="edit(CONSTANT.ciColumn,{category_uid: clickMenu.uid},service.createCategory,`添加`)">添加</el-button>
      </el-col>
    </el-row>
    <!-- 数据显示 -->
    <el-table border style="width: 100%" max-height="500" :data="displayList">
      <el-table-column
        v-for="(item, key) in tableTag"
        :key="key"
        :label="item.name"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[key] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" :disabled="scope.row.self_flag===false" @click.stop="edit(CONSTANT.ciColumn,scope.row,service.updateCi,`编辑`)">编辑</el-button>
          <el-button size="mini" type="danger" :disabled="scope.row.self_flag===false" @click.stop="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑 弹窗 -->
    <el-dialog v-if="modelFlag" :title="modelTitle" :visible="modelFlag" append-to-body @close="modelFlag=!modelFlag">
      <el-tabs v-model="activetab" type="card" @tab-click="tabClick">
        <el-tab-pane label="编辑内容" name="0"><edit-model :data="modelData" @submit="submit" @cancel="modelFlag=!modelFlag" /></el-tab-pane>
        <el-tab-pane label="分配" name="1">
          <el-transfer
            v-model="transferValue"
            filterable
            :filter-method="transferFilter"
            :data="transferData"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </el-main>
</template>
<script>
import { mapState } from 'vuex'
const CONSTANT = {
  placeholder: '请输入关键字',
  deleteConfirm: '您确定删除吗?',
  ciColumn: [
    'uid',
    'flag',
    'category_uid',
    'category_name',
    'id',
    'name',
    'parent_uid',
    'parent_name',
    'previous_uid',
    'previous_name'
  ],
  ciRelationColumn: [
    'uid',
    'flag',
    'relation_uid',
    'relation_name',
    'target_uid',
    'target_name',
    'origin_uid',
    'origin_name'
  ],
  relationColumn: [
    'uid',
    'flag',
    'id',
    'name',
    'target_uid',
    'target_name',
    'origin_uid',
    'origin_name'
  ]
}
export default {
  name: 'Testpct',
  components: {
    editModel: () => import('@components/EditModel.vue')
  },
  data() {
    return {
      CONSTANT,
      clickMenu: null,
      itemFilter: null,
      tableFilter: null,
      tableList: [],
      modelFlag: false, // 编辑框--显示隐藏
      modelTitle: null, // 编辑框--标题
      modelData: null, // 编辑框--内容
      modelFunction: null, // 编辑框--提交方法
      modelCallback: null, // 编辑框--回调
      activetab: 0,
      transferValue: [],
      transferInfo: [],
      transferRelation: [],
      categoryTemplate: ['account', 'role', 'organiz']
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      display: state => state.systemProfile.display,
      category: state => state.systemProfile.category
    }),
    categoryData() {
      return this.categoryTemplate.reduce((result, key) => (
        this.category.find(x => x.id === key)
          ? [...result, this.category.find(x => x.id === key)]
          : result), []
      )
    },
    tableTag() {
      return this.CONSTANT.ciColumn.reduce((result, key) => (
        this.display[key] && this.display[key].show
          ? { ...result, [key]: this.display[key] }
          : result), {}
      )
    },
    // 实例数据
    displayList() {
      if (this.tableList && this.tableFilter && this.tableFilter.trim()) {
        return this.tableList.filter(item =>
          item.id.toLowerCase().indexOf(this.tableFilter.trim().toLowerCase()) !== -1 ||
          item.name.toLowerCase().indexOf(this.tableFilter.trim().toLowerCase()) !== -1 ||
          (item.parent_name && item.parent_name.toLowerCase().indexOf(this.tableFilter.trim().toLowerCase()) !== -1) ||
          (item.previous_name && item.previous_name.toLowerCase().indexOf(this.tableFilter.trim().toLowerCase()) !== -1)
        )
      } else {
        return this.tableList
      }
    },
    // 分配数据
    transferData() {
      const data = []
      return data
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化
    initData() {
      if (!this.clickMenu) {
        this.click(this.categoryData[0])
      }
    },
    // 获取实例数据
    async getCi(data) {
      const result = await this.service.getCi({ category_uid: data })
      if (!result.flag) {
        this.$message.error(`${result.id} : ${result.name}`)
      } else if (result.data) {
        this.tableList = result.data
      }
    },
    // 获取实例属性
    async getInfo(data) {
      const result = await this.service.getCiInfo(data)
      if (!result.flag) {
        this.$message.error(`${result.id} : ${result.name}`)
      } else if (result.data) {
        this.transferInfo = result.data.filter(item => item.uid)
      }
    },
    // 获取实例关联关系
    async getRelation(data) {
      const result = await this.service.getCiRelation(data)
      if (!result.flag) {
        this.$message.error(`${result.id} : ${result.name}`)
      } else if (result.data) {
        this.transferRelation = result.data.filter(item => item.uid)
      }
    },
    async click(data, $event) {
      if (this.clickMenu !== data) {
        this.clickMenu = data
        await this.getCi(data.uid)
      }
    },
    // 编辑
    async edit(tag, data, action, title) {
      this.modelFlag = !this.modelFlag
      this.modelTitle = title
      this.modelFunction = action
      this.modelData = tag.reduce((result, key) => ({ ...result, [key]: data[key] }), {})
      await this.getInfo(data)
      await this.getRelation(data)
    },
    // 提交数据
    async submit(data) {
      const result = await this.modelFunction(data)
      if (!result.flag) {
        this.$message.error(`${result.id} : ${result.name}`)
      } else {
        this.modelFlag = !this.modelFlag
        await this.initData()
      }
    },
    // 删除
    async removeData(data, modelFunction = this.service.deleteCi) {
      const result = await modelFunction(data)
      if (!result.flag) {
        this.$message.error(`${result.id} : ${result.name}`)
      } else if (result.data) {
        await this.initData()
      }
    },
    remove(data, action = this.service.deleteCi) {
      this.$confirm(this.CONSTANT.deleteConfirm)
        .then(_ => {
          this.$message.success('删除操作了')
          // this.removeData(data, action);
        })
        .catch(() => {})
    },
    // 切换
    tabClick() {
      // this.$message.success('切换了');
    },
    transferFilter(query, item) {
      return item.pinyin.indexOf(query) > -1
    }
  }
}
</script>
<style scoped>
.main {
  padding: 1rem;
}
.table-title {
  padding-bottom: 1rem;
}
.iteminput {
  width: auto;
  margin-right: 1rem;
}
.table-title-right {
  white-space: nowrap;
}
.el-row-bg {
  flex-wrap: wrap;
}
.el-row-bg > div {
  padding-bottom: 1rem;
}
.dialog /deep/ .dialog-footer {
  text-align: right;
  padding-top: 3rem;
}
</style>
